<template>
  <el-dialog title="新增员工" :visible.sync="visible">
    <!-- 表单 -->
    <el-form label-width="120px">
      <el-form-item label="姓名">
        <el-input
          v-model="form.username"
          style="width:50%"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机">
        <el-input
          v-model="form.mobile"
          style="width:50%"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          v-model="form.timeOfEntry"
          type="date"
          style="width:50%"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="聘用形式">
        <el-select
          v-model="form.formOfEmployment"
          style="width:50%"
          placeholder="请选择"
        >
          <!-- value 选中的值 label 用户看到的值 -->
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :value="item.id"
            :label="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-input
          v-model="form.workNumber"
          style="width:50%"
          placeholder="请输入工号"
        />
      </el-form-item>
      <el-form-item label="部门">
        <el-input
          v-model="form.departmentName"
          style="width:50%"
          placeholder="请选择部门"
          @focus="branchBtn"
        />
        <el-tree
          v-show="showTree"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-form-item>
      <el-form-item label="转正时间">
        <el-date-picker
          v-model="form.correctionTime"
          type="date"
          style="width:50%"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="confirmBtn"
          >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// 导入接口
import { getDepartments } from '../../../api/departments.js'
import { addEmployee } from '../../../api/employees.js'
// 导入数组转数的方法
import { formatData } from '../../../utils/index.js'
// 导入聘用形式用到的方法
import employessEnum from '../../../api/constant/employees.js'
export default {
  name: 'EmployeeDialog',

  data() {
    return {
      visible: false, // 是否显示弹框
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      }, // 表单数据
      formLabelWidth: '120px', // 左侧内容边框
      treeData: [], // 部门数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showTree: false, // 是否显示部门
      // 聘用形式对应方式
      hireType: employessEnum.hireType
    }
  },
  methods: {
    // 确定按钮
    async confirmBtn() {
      const res = addEmployee(this.form)
      this.form = res
      console.log('res::', res)
      this.visible = false
      this.$message.success('新增成功')
      this.$parent.getData()
      this.form = {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      }
    },
    // 点击部门按钮
    async branchBtn() {
      const res = await getDepartments()
      console.log(res)
      // 调用方法，数组转树
      this.treeData = formatData(res.depts, '')
      this.showTree = true
    },
    // 点击节点
    handleNodeClick(data) {
      console.log(data)
      // 获取name
      this.form.departmentName = data.name
      this.showTree = false
    }
  }
}
</script>

<style></style>
